<<template>
    <div id="playsong">
        <div class="main_box">
            <div class="song_info">
                <img src="https://y.gtimg.cn/music/photo_new/T002R150x150M000004avLEH3iQD8X.jpg?max_age=2592000" alt="">
                <div class="song_info_flex">
                    <h1>桃花诺</h1>
                    <p>G.E.M. 邓紫棋</p>
                </div>
                <a href="javascript:;"></a>
            </div>
            <div class="flex_item">

                <div id="wrapper">
                    <div class="lyric">
                        <template v-if="lyricList">
                            <p v-for="(item, index) in lyricList" :class="{'on': currentIndex == index}" >{{item.text}}</p>
                        </template>
                        <template v-else>
                            <p>暂未歌词</p>
                        </template>
                    </div>
                </div>

            </div>
        </div>

        <div class="bottom_box">
            <div class="progress">
                <div class="progress_bar">
                    <div class="bg"></div>
                    <div class="bg_on"></div>
                </div>

                <span class="start">00:00</span>
                <span class="end">10:00</span>
            </div>
        </div>

        <div class="bg_blur"></div>
        <div class="bg_mask"></div>

        <audio src="" id="myAudio"></audio>
    </div>
</template>

<script>
    import { Indicator } from 'mint-ui';
    export default {
        name: 'playsong',
        data () {
            return {
                lyricList: [],
                currentIndex: '',
            }
        },
        mounted () {
            // 歌曲id
            var songIds = this.$route.params.songIds.split(',');
            var songid = songIds[this.$route.params.playIndex];

            var that = this;

            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            });

            
            // 获取歌词
            this.$http.get('http://route.showapi.com/213-2', {
                params: {
                    showapi_appid: 26444,
                    showapi_sign: 'e6ed68d43d734b78892a649fedd90cbe',
                    musicid: songid
                }
            }).then(function(res) {
                var data = res.data;
                if (data && data.showapi_res_code == 0) {
                    var lyric = data.showapi_res_body.lyric
                    
                    console.log(lyric);

                    // 关键代码：歌词解析
                    var lyricArr = lyric.replace(/&#\d+;/g, function(char) {
                        return String.fromCharCode(char.substring(2, char.length - 1));
                    }).split('\n')
                    console.log(lyricArr);
                    // console.log(lyricArr);

                    for (var i = 0; i < lyricArr.length; i++) {
                        var tempArr =  lyricArr[i].split(']');
                        var text = tempArr[1];      // 歌词

                        if (!text || text == '\r') {
                            continue
                        }

                        var times = tempArr[0].substr(1).split(':');
                        var time = parseInt(times[0] * 60 + times[1]);

                        var obj = {
                            time: time,
                            text: text
                        };
                        that.lyricList.push(obj);
                    }

                    that.$nextTick(function() {
                        new iScroll('wrapper');
                    })

                } else {
                    that.lyricList = null;
                }

                Indicator.close();
            })




            // 歌曲播放
            var myAudio = document.getElementById('myAudio');
            myAudio.setAttribute('src', 'http://ws.stream.qqmusic.qq.com/' + songid + '.m4a?fromtag=46');
            // myAudio.play();

            myAudio.oncanplay = function() {
                var max = 0;
                var lyricList = that.lyricList;
                setInterval(function() {

                    for (var i = max; i < lyricList.length; i++) {
                        if (lyricList[i].time <= myAudio.currentTime) {
                            that.currentIndex = i;
                            max = i;
                        }
                    }
                    
                }, 500);
            }
        }
    }
</script>

<style lang="scss">
    #playsong {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
    }
    .bg_blur {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1;
        width: 100%;
        background-position: bottom center;
        background-size: cover;
        background-image: url("https://y.gtimg.cn/music/photo_new/T002R150x150M000004avLEH3iQD8X.jpg?max_age=2592000");
        transform: scale(1.15);
        filter: blur(15px);
    }

    .bg_mask {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        z-index: 2;
        background-color: #000;
        opacity: 0.6;
    }
    
    .main_box {
        position: absolute;
        top: 0;
        bottom: 100px;
        z-index: 3;
        width: 100%;
        display: flex;
        flex-direction: column;

        .song_info {
            position: relative;
            display: flex;
            padding: 15px 80px 15px 15px;
            background: rgba(0, 0, 0, 0.1);

            img {
                width: 80px;
                height: 80px;
                margin-right: 15px;
                overflow: hidden;
            }

            .song_info_flex {
                flex: 1;
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;

                h1 {
                    height: 30px;
                    line-height: 30px;
                    font-size: 18px;
                    font-weight: normal;
                    margin-bottom: 10px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                p {
                    font-size: 14px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }

            a {
                position: absolute;
                top: 50%;
                right: 25px;
                width: 42px;
                height: 42px;
                border: 2px solid #fff;
                border-radius: 50%;
                margin-top: -21px;

                &:after {
                }
            }
        }

        .flex_item {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            #wrapper {
                position: relative;
                width: 100%;
                height: 70%;
                overflow: hidden;

                .lyric {
                    position: absolute;
                    width: 100%;

                    p {
                        height: 42px;
                        line-height: 42px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-size: 16px;
                        color: rgba(255, 255, 255, .6);
                        text-align: center;

                        &.on {
                            color: #31c27c;
                        }
                    }
                }
            }
        }
    }

    .bottom_box {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 3;

        .progress {
            position: absolute;
            height: 40px;
            width: 100%;

            .progress_bar {
                position: absolute;
                top: 0;
                left: 55px;
                right: 55px;
                height: 40px; 
                overflow: hidden;

                .bg, .bg_on {
                    position: absolute;
                    height: 2px;
                    width: 100%;
                    top: 19px;
                }

                .bg {
                    background-color: rgba(255, 255, 255, 0.2);
                }

                .bg_on {
                    width: 0;
                    background-color: #31c27c;
                }
            }

            span {
                position: absolute;
                top: 0;
                width: 55px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #808080;
                font-size: 12px;

                &.start {
                    left: 0;
                }

                &.end {
                    right: 0;
                }
            }
        }
    }

    .mint-indicator-mask {
        opacity: 1;
        background-color: rgba(0, 0, 0, .5);
    }
    .mint-indicator-wrapper {
        z-index: 999;
    }
</style>